<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<link href="../../bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
	<script src="/js/vue.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
<script type="text/javascript">

	//默认情况下取消和保存按钮是隐藏的
	var cancelAndSaveBtnDefault = true;
	
	$(function(){
		$("#remark").focus(function(){
			if(cancelAndSaveBtnDefault){
				//设置remarkDiv的高度为130px
				$("#remarkDiv").css("height","130px");
				//显示
				$("#cancelAndSaveBtn").show("2000");
				cancelAndSaveBtnDefault = false;
			}
		});
		
		$("#cancelBtn").click(function(){
			//显示
			$("#cancelAndSaveBtn").hide();
			//设置remarkDiv的高度为130px
			$("#remarkDiv").css("height","90px");
			cancelAndSaveBtnDefault = true;
		});
		
		$(".remarkDiv").mouseover(function(){
			$(this).children("div").children("div").show();
		});
		
		$(".remarkDiv").mouseout(function(){
			$(this).children("div").children("div").hide();
		});
		
		$(".myHref").mouseover(function(){
			$(this).children("span").css("color","red");
		});
		
		$(".myHref").mouseout(function(){
			$(this).children("span").css("color","#E6E6E6");
		});
	});
	
</script>

</head>
<body>
<div id="app">



	<!-- 返回按钮 -->
	<div style="position: relative; top: 35px; left: 10px;">
		<a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
	</div>
	
	<!-- 大标题 -->
	<div style="position: relative; left: 40px; top: -30px;">
		<div class="page-header">
			<h3>{{clue.fullName}}{{clue.applicationValue.text}} <small>{{clue.company}}</small></h3>
		</div>
		<div style="position: relative; height: 50px; width: 500px;  top: -72px; left: 700px;">
			<button type="button" class="btn btn-default" @click="convert">
				<span class="glyphicon glyphicon-retweet"></span>
				转换</button>
		</div>
	</div>
	
	<br/>
	<br/>
	<br/>

	<!-- 详细信息 -->
	<div style="position: relative; top: -70px;">
		<div style="position: relative; left: 40px; height: 30px;">
			<div style="width: 300px; color: gray;">名称</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{clue.fullName}}{{clue.applicationValue.text}} </b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">所有者</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{clue.ownerUser?clue.ownerUser.name:""}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 10px;">
			<div style="width: 300px; color: gray;">公司</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{clue.company}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">职位</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{clue.job}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 20px;">
			<div style="width: 300px; color: gray;">邮箱</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{clue.email}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">公司座机</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{clue.phone}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 30px;">
			<div style="width: 300px; color: gray;">公司网站</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{clue.website}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">手机</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{clue.mphone}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 40px;">
			<div style="width: 300px; color: gray;">线索状态</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{clue.stateValue.text}}</b></div>
			<div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">线索来源</div>
			<div style="width: 300px;position: relative; left: 650px; top: -60px;"><b>{{clue.sourceValue.text}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 50px;">
			<div style="width: 300px; color: gray;">创建者</div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>{{clue.createUser?clue.createUser.name:""}}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">{{clue.createTime}}</small></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 60px;">
			<div style="width: 300px; color: gray;">修改者</div>
			<div style="width: 500px;position: relative; left: 200px; top: -20px;"><b>{{clue.editUser?clue.editUser.name:""}}&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">{{clue.editTime}}</small></div>
			<div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 70px;">
			<div style="width: 300px; color: gray;">描述</div>
			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
				<b>
					{{clue.description}}
				</b>
			</div>
			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 80px;">
			<div style="width: 300px; color: gray;">联系纪要</div>
			<div style="width: 630px;position: relative; left: 200px; top: -20px;">
				<b>
					{{clue.contactSummary}}
				</b>
			</div>
			<div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
		</div>
		<div style="position: relative; left: 40px; height: 30px; top: 90px;">
			<div style="width: 300px; color: gray;">下次联系时间</div>
			<div style="width: 300px;position: relative; left: 200px; top: -20px;"><b>{{clue.nextContactTime}}</b></div>
			<div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px; "></div>
		</div>
        <div style="position: relative; left: 40px; height: 30px; top: 100px;">
            <div style="width: 300px; color: gray;">详细地址</div>
            <div style="width: 630px;position: relative; left: 200px; top: -20px;">
                <b>
					{{clue.address}}
                </b>
            </div>
            <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
        </div>
	</div>
	
	<!-- 备注 -->
	<div style="position: relative; top: 40px; left: 40px;">
		<div class="page-header">
			<h4>备注</h4>
		</div>
		
		<!-- 备注1 -->
		<div v-for="item in remarks" class="remarkDiv" style="height: 60px;">
			<img :title="item.createUser?item.createUser.name:''" src="../../image/user-thumbnail.png" style="width: 30px; height:30px;">
			<div style="position: relative; top: -40px; left: 40px;" >
				<h5>{{item.noteContent}}</h5>
				<font color="gray">线索</font> <font color="gray">-</font> <b>{{clue.fullName}}{{clue.applicationValue.text}}-{{clue.company}}</b> <small style="color: gray;">
				{{item.createTime}} 由{{item.createUser?item.createUser.name:""}}</small>
				<div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
					<a class="myHref" @click="toEdit(item)" href="javascript:void(0);"><span class="glyphicon glyphicon-edit" style="font-size: 20px; color: #E6E6E6;"></span></a>
					&nbsp;&nbsp;&nbsp;&nbsp;
					<a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove" style="font-size: 20px; color: #E6E6E6;"></span></a>
				</div>
			</div>
		</div>
		<div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
			<form role="form" style="position: relative;top: 10px; left: 10px;">
				<textarea id="remark" v-model="remark.noteContent" class="form-control" style="width: 850px; resize : none;" rows="2"  placeholder="添加备注..."></textarea>
				<p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px; display: none;">
					<button id="cancelBtn" type="button" class="btn btn-default">取消</button>
					<button type="button" class="btn btn-primary" @click="saveRemark">保存</button>
				</p>
			</form>
		</div>
	</div>
	
	<!-- 市场活动 -->
	<div>
		<div style="position: relative; top: 60px; left: 40px;">
			<div class="page-header">
				<h4>已有的市场活动</h4>
			</div>
			<div style="position: relative;top: 0px;">
				<el-table
						:data="activitysChoosed"
						border
						style="width: 100%">
					<el-table-column
							fixed
							prop="name"
							label="名称"
							width="150">
					</el-table-column>
					<el-table-column
							prop="startDate"
							label="开始时间"
							width="120">
					</el-table-column>
					<el-table-column
							prop="endDate"
							label="结束时间"
							width="120">
					</el-table-column>
					<el-table-column
							prop="ownerUser.name"
							label="所有者"
							width="120">
					</el-table-column>
					<el-table-column
							label="操作"
							width="100">
						<template slot-scope="scope">
							<el-button @click="deleteClueActivity(scope.row.id)" type="text" size="small">解除关联</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			
			<div>
				<a href="javascript:void(0);" @click="openActivityDialog" style="text-decoration: none;">
					<span class="glyphicon glyphicon-plus"></span>关联市场活动</a>
			</div>
		</div>
	</div>

	<div style="height: 200px"></div>
<!--显示所有的市场活动的弹框-->
	<el-dialog title="市场活动" :visible.sync="dialogTableVisible">
		<el-form :inline="true"  class="demo-form-inline">
			<el-form-item label="活动名称">
				<el-input v-model="search.name" placeholder="活动名称"></el-input>
			</el-form-item>
			<el-form-item label="拥有者">
				<el-select v-model="search.owner" placeholder="拥有者">
					<el-option label="--请选择--" value=""></el-option>
					<el-option v-for="item in users" :label="item.name" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="开始日期">
				<el-date-picker
						v-model="search.startDate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择开始日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="结束日期">
				<el-date-picker
						v-model="search.endDate"
						type="date"
						value-format="yyyy-MM-dd"
						placeholder="选择结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="getAllActivity">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table
				:data="activitys"
				border
				ref="activitysTable"
				style="width: 100%"
				tooltip-effect="dark"
				@selection-change="handleSelectionChange">
			<el-table-column
					type="selection"
					width="55">
			</el-table-column>
			<el-table-column
					fixed
					prop="name"
					label="活动名称"
					width="150">
			</el-table-column>
			<el-table-column
					prop="ownerUser.name"
					label="拥有者"
					width="120">
			</el-table-column>
			<el-table-column
					prop="startDate"
					label="开始日期"
					width="120">
			</el-table-column>
			<el-table-column
					prop="endDate"
					label="结束日期"
					width="120">
			</el-table-column>
		</el-table>
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pageNum"
				:page-sizes="[5, 10, 15, 20]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
		</el-pagination>

		<div>
			<el-button type="success" @click="saveActivityClue">确定关联</el-button>
		</div>
	</el-dialog>
</div>
<script>
	new Vue({
		el:"#app",
		data:{
			clue:{},
			remarks:[],//线索备注
			remark:{//修改和添加的备注信息
				id:undefined,
				noteContent:undefined,
				createBy:undefined,
				editBy:undefined,
				clueId:undefined,
			},
			activitysChoosed:[],  //已关联的市场活动
			dialogTableVisible:false,  //市场活动的列表的弹框是否显示
			activitys:[],
			pageNum:1,
			pageSize:5,
			total:undefined,
			multipleSelection:[],
			search:{//搜索条件
				name:undefined,
				owner:undefined,
				startDate:undefined,
				endDate:undefined
			},
			users:[],//所有的拥有者-->所有的用户
		},
		methods:{
			convert(){//跳转转换页面中
				let clue={fullName:this.clue.fullName,appelication:this.clue.applicationValue.text,
				          company:this.clue.company,clueId:this.clue.id,ownerName:this.clue.ownerUser.name};
				sessionStorage.setItem("clue",JSON.stringify(clue))
				location.href="convert.html";
			},
			saveActivityClue() {//重新关联线索-市场活动
				let activityIds=[];//选中的市场获取
				this.multipleSelection.forEach(item=>{
					activityIds.push(item.id);
				});
				axios.get(`/clue/editActivityClue?clueId=${sessionStorage.getItem("clueId")}
				&activityIds=${activityIds.join(",")}`).then(resp=>{
					let data=resp.data;
					if (data.code==200){
						//隐藏弹框
						this.dialogTableVisible=false;
						//刷新已关联的市场活动列表
						this.getActivityByClueId();
					}
				})
			},
			handleSelectionChange(val) {//市场活动列表的左侧复选框的点击事件
				this.multipleSelection = val;
			},
			openActivityDialog(){//打开市场活动列表的弹框
				this.dialogTableVisible=true;
				this.getAllUser();//获取所有的拥有者
				//选中的市场活动的行
				let checkRow=[];
				this.activitysChoosed.forEach(item1=>{//已有的市场活动
					this.activitys.forEach(item2=>{
						if (item2.id==item1.id){
							checkRow.push(item2);
						}
					})
				});
				this.$nextTick(()=>{
					checkRow.forEach(row => {//勾上当前行
						this.$refs.activitysTable.toggleRowSelection(row,true);
					});
				})
			},
			getAllActivity(){//获取表格数据
				axios.get("/activity",{params:{
						pageNum:this.pageNum,
						pageSize: this.pageSize,
						...this.search
					}}).then(resp=>{
					let data=resp.data;
					this.activitys=data.result;
					this.total=data.count;
				})
			},
			handleSizeChange(val) {//市场活动列表分页
				console.log(`每页 ${val} 条`);
				this.pageSize=val;
				this.getAllActivity();
			},
			handleCurrentChange(val) {//市场活动列表分页
				console.log(`当前页: ${val}`);
				this.pageNum=val;
				this.getAllActivity();
			},
			getAllUser(){//获取所有的用户,拥有者
				axios.get("/user").then(resp=>{
					let data=resp.data;
					this.users=data.result
				})
			},
			deleteClueActivity(activityId){//解除关联
				this.$confirm('此操作将永久解除关联, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.delete(`/activity/deleteClueActivity?clueId=${sessionStorage.getItem("clueId")}
					&activityId=${activityId}`).then(resp=>{
						let data=resp.data;
						if (data.code==200){
							this.$message({
								type: 'success',
								message: '解除关联成功!'
							});
							//刷新关联列表
							this.getActivityByClueId();
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			initData(){
				axios.get(`/clue/getById?id=${sessionStorage.getItem("clueId")}`).then(resp=>{
					let data=resp.data;
					this.clue=data.result
				})
			},
			getRemarksByClueId(){//获取备注列表
				axios.get(`/clueRemark/getClueRemarkByClueId?clueId=${sessionStorage.getItem("clueId")}`)
				.then(resp=>{
					this.remarks=resp.data.result
				})
			},
			toEdit(item){//点击修改备注按钮
				this.remark={...item}
			},
			saveRemark(){//保存备注
				let user=JSON.parse(sessionStorage.getItem("user"));
				if (this.remark.id){//修改
					//修改人
					this.remark.editBy=user.id
				}else{
					//创建人
					this.remark.createBy=user.id;
				}
				//线索id
				this.remark.clueId=sessionStorage.getItem("clueId");


				axios({
					method:this.remark.id?"put":"post",
					url:"/clueRemark",
					data:this.remark
				}).then(resp=>{
					let data =resp.data;
					if (data.code==200){
						this.$message({
							type:"success",
							message:data.msg
						})
						this.getRemarksByClueId();//获取备注列表
						this.remark.id=undefined;
						this.remark.noteContent=undefined;
					}
				})
			},
			getActivityByClueId(){//获取已经关联的市场活动
				axios.get(`/activity/getActivitysByClueId?clueId=${sessionStorage.getItem("clueId")}`)
				.then(resp=>{
					this.activitysChoosed=resp.data.result
				})
			}
		},
		created(){
			this.initData();
			this.getRemarksByClueId();//获取备注列表
			this.getActivityByClueId()//获取已经关联的市场活动
			this.getAllActivity();  //获取所有的市场活动数据
		},
		updated(){//数据刷新的钩子函数,一旦点击页码的切换,数据重新渲染
			//选中的市场活动的行
			let checkRow=[];
			this.activitysChoosed.forEach(item1=>{//已有的市场活动
				this.activitys.forEach(item2=>{
					if (item2.id==item1.id){
						checkRow.push(item2);
					}
				})
			});
			//dialog的子组件,加上this.$nextTick()
			this.$nextTick(()=>{
				//清空之前的选中状态
				this.$refs.activitysTable.clearSelection();
				checkRow.forEach(row => {//勾上当前行
					this.$refs.activitysTable.toggleRowSelection(row,true);
				});
			})
		}
	})
</script>
</body>
</html>